<template>
  <div>
    <!-- 
      动态属性
      语法： v-bind:属性名="vue中定义的变量/表达式"
      简化的语法： 将v-bind: 转化为 : => :属性名="vue中定义的变量/表达式"
    -->

    <a v-bind:href="hrefUrl">www.baidu.com</a>
    <br />
    <!-- 关于v-bind动态属性作用于图片时尤其需要注意
      v-bind 会直接讲资源路径认定为字符串
      如何解决呢？ 直接在v-bind动态属性后面传递实际的资源
    -->
    <img src="../assets/123.png" alt="" />
    <br />
    <img v-bind:src="imgUrl1" alt="" />
    <br />
    <img :src="imgUrl2" alt="" />
    <br />
    <img :src="imgUrl3" alt="" />
  </div>
</template>

<script>
// 通过import引入资源文件，在data中进行定义，最后再动态属性中使用
import img from '../assets/123.png'
export default {
  name: 'DemoIndex2',
  data () {
    return {
      hrefUrl: 'http://www.baidu.com',
      imgUrl1: '../assets/123.png',
      imgUrl2: img,
      // require 引入资源文件， 直接在动态属性中使用
      // 优势： require引入资源的方式是按需的，这样一来，页面初始更新效率会更高
      imgUrl3: require('../assets/123.png')
    }

    
  }
}
</script>

<style>

</style>